<template>
<div>
    <main class="show">
        <b-view-header :config="showIndexViewConfig">
            <template #footer>
             <u-button-group></u-button-group>
            </template>
</b-view-header>
<!-- 组件过渡效果是这样写的 控制台有提示 -->
<router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
        <component :is="Component" />
    </transition>
</router-view>

</main>
</div>


</template>

<script>
    import BViewHeader from "@b/view-header.vue";
    import {
        showIndexViewConfig
    } from "@vp/show/index.js";
    import {
        useButtonGroup
    } from "@u/button-group.jsx";
    export default {
        components: {
            BViewHeader,
            UButtonGroup: useButtonGroup(showIndexViewConfig.buttonGroup)
        },
        setup() {
            return {
                showIndexViewConfig
            }
        }
    }
</script>
<style scoped>
    .show {
        width: 50vw;
        margin: 50px auto;
        padding: 50px 0;
    }
</style>